<template>
	<!-- 54是搜索框整体高度  52是tab的整体高度  不展示搜索框时需去除54-->
	<view class="page" :style="{'min-height':h+'px','padding-top':(mt+52)+'px'}">
		<!-- 头部 -->
		<c-nav-bar title="小工市场" backUrl="/pages/my/index"></c-nav-bar>

		<!-- 	<u-tabs :list="togList" @click="click" itemStyle="width:50%;padding:22rpx 0;;background:#fff" lineWidth="64"
			lineHeight="4" :current="current"></u-tabs> -->

		<TopTabs :list="togList" @changeTab="click" :top="mt"></TopTabs>

		<view class="orders" v-if="title=='我的申请'">
			<view v-for="(item,index) in orderList" :key="index">
				<view class="top">
					<view class="left">
						<image src="https://i.ringzle.com/file/20240108/6b8d6588273a4c9ba7a38c94772b07e8.png"></image>
						<!-- <text>{{item.linkName}}</text> -->
						<text>小工市场</text>
					</view>
					<view class="right">
						<text v-if="item.state==0" style="color: #FF7D01;">{{item.state==0?'待确认':''}}</text>
						<text v-if="item.state==1">{{item.state==1?'已完成':''}}</text>
						<text v-if="item.state==2">{{item.state==2?'已取消':''}}</text>
					</view>
				</view>
				<view class="content">
					<view class="title" style="color: #333333; font-size: 32rpx; font-weight: bold;">
						<text>{{item.workName}}</text>
						<text>{{item.money}}元/月</text>
					</view>
					<view class="date">
						<text> {{item.address}}</text>
					</view>
					<view class="room_price">
						<text>申请时间：{{item.createDate}}</text>
					</view>
				</view>
				<view class="btns" v-if="item.state==1 ">
					<view @tap.stop="cancelOrder(item)">删除</view>
					<view @tap.stop="appraise(item)">评价</view>

				</view>
				<view class="btns" v-if="item.state==0">
					<view @tap.stop="cancelOrder(item)">取消申请</view>

				</view>

			</view>
		</view>

		<view class="orders" v-if="title=='收到的简历'">
			<view v-for="(item,index) in orderList1" :key="index" @tap.prevent="toDetails(item)">
				<view class="top">
					<view class="left">
						<image src="https://i.ringzle.com/file/20231130/4c98840700944e86b6bbbd0dce14fae5.png"></image>
						<!-- <text>{{item.linkName}}</text> -->
						<text>小工市场</text>
					</view>
					<view class="right">
						<text v-if="item.state==0" style="color: #FF7D01;">{{item.state==0?'待确认':''}}</text>
						<text v-if="item.state==1">{{item.state==1?'已完成':''}}</text>
						<text v-if="item.state==2">{{item.state==2?'已取消':''}}</text>
					</view>
				</view>
				<view class="content">
					<view class="title">
						<text>{{item.name}}</text> <text>{{item.sex==1?'男':'女'}}</text> |
						<text>{{item.education}}</text>| <text>{{item.workingHours}}</text>
					</view>
					<view class="date">
						<text> 投递职位： {{item.workName}}</text>
					</view>
					<view class="room_price">
						<text>申请时间：{{item.createDate}}</text>
					</view>
				</view>
				<view class="btns" v-if="item.state==1 ">
					<view @tap.stop="cancelOrder(item)">删除</view>
					<view @tap.stop="appraise(item)">评价</view>

				</view>
				<view class="btns" v-if="item.state==0">

					<view @tap.stop="del(item)">忽略</view>
					<view @tap.stop="changeTicket(item)" class="btn_blue">确认录用</view>
				</view>

			</view>
		</view>


		<view class="tip">{{orderList.length>0?'已显示全部订单':'暂无订单'}}</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import TopTabs from '@/compoments/TopTabs/TopTabs2.vue';
	export default {
		components: {
			TopTabs
		},
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleStyle: {
					fontSize: '36rpx',
					fontWeight: "bold",
					color: "#333333"
				},
				togList: [{
						name: '我的申请',
					},
					{
						name: '收到的简历',
					},
				],
				title: '我的申请',
				orderList: [],
				orderList1: [],
				current: 0,
				fromData: {
					limit: 10,
					page: 1
				},
				fromList: {
					education: "",
					id: 0,
					jobId: 0,
					money: 0,
					name: "",
					phone: "",
					workName: "",
					workingHours: "",
				}
			}
		},
		onLoad() {
			if (this.title == '我的申请') {
				this.getFishermanOrder()
			}
		},

		methods: {
			// 评价
			appraise(item) {
				console.log(item);
				let obj = {
					guideId: item.userId,
					orderCode: item.id,
					sourceType: 12,
				}
				console.log('++++++', obj);
				uni.navigateTo({
					url: '/pagesMy/appraise/appraise?obj=' + JSON.stringify(obj),
				});

			},
			// 删除订单
			del(item) {
				console.log(item);
				this.$api.put('/api/smallMarket', {
					id: item.id,
					state: 2,
				}).then(res => {
					if (res.data.code === 0) {
						this.$showToast('忽略');
						this.getFishermanOrder()
					} else this.$showModal(res.data.msg)
				})

			},
			toDetails(item) {
				console.log(item);
			},
			// 确定录用
			changeTicket(item) {
				// /api/smallMarket
				this.$api.put('/api/smallMarket', {
					id: item.id,
					state: 1,
				}).then(res => {
					if (res.data.code === 0) {
						this.$showToast('确定录用');
						this.getSmallMarket()
					} else this.$showModal(res.data.msg)
				})
			},
			//取消申请
			cancelOrder(item) {
				// /api/smallMarket
				this.$api.put('/api/smallMarket', {
					id: item.orderId,
					// state: item.state,
					isvalid: 1
				}).then(res => {
					if (res.data.code === 0) {
						this.$showToast('取消申请');
						this.getFishermanOrder()
					} else this.$showModal(res.data.msg)
				})
			},
			// 切换
			click(e) {
				console.log(e);
				// this.getList(e.name)
				if (e == 0) {
					this.title = '我的申请'
					this.getFishermanOrder()
				}
				if (e == 1) {
					this.title = '收到的简历'
					this.getSmallMarket()
				}
			},
			// 我的申请
			getFishermanOrder() {
				this.$api.get('/api/smallMarket/getPage', this.fromData).then(res => {
					console.log(res);
					this.orderList = res.data.data.list
				})
			},
			// 收到的简历
			getSmallMarket() {
				this.$api.get('/api/smallMarket/page', this.fromData).then(res => {
					console.log(res);
					this.orderList1 = res.data.data.list
				})
			},
		}
	}
</script>
<style lang="scss">
	.u-tabs__wrapper__nav__line {
		// left: 20rpx !important;
		left: 30rpx !important;
		height: 6rpx !important;
		width: 80rpx !important;
	}
</style>

<style scoped lang="less">
	.page {
		background: #F5F8FA;
		padding: 100rpx 0 1rpx;

		.orders {
			display: flex;
			flex-direction: column;
			align-items: center;

			&>view {
				width: calc(100% - 96rpx);
				margin-top: 20rpx;
				border-radius: 16rpx;
				background: #fff;
				padding: 36rpx 24rpx 24rpx;

				.top {
					display: flex;
					justify-content: space-between;

					.left {
						display: flex;
						align-items: center;

						image {
							width: 36rpx;
							height: 36rpx;
						}

						text {
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #111111;
							line-height: 28rpx;
							margin-left: 20rpx;
						}
					}

					.right {
						text-align: right;
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						line-height: 37rpx;
						color: #88919D;
					}
				}

				.content {
					padding: 22rpx 0 24rpx 56rpx;
					background: #fff;

					.title {
						display: flex;
						align-items: center;
						color: #666666;
						line-height: 45rpx;


						:nth-child(1) {
							color: #333333;
							font-size: 32rpx;
							font-family: PingFang-SC-Bold, PingFang-SC;
							font-weight: bold;
							margin-right: 32rpx;
							margin: 0 4rpx;
						}

						:nth-child(2) {
							color: #666666;
							font-size: 26rpx;
							font-weight: Regular;
							font-family: PingFang-SC-Bold, PingFang-SC;
							margin: 0 4rpx;
						}

						:nth-child(3) {
							color: #666666;
							font-size: 26rpx;
							font-weight: Regular;
							font-family: PingFang-SC-Bold, PingFang-SC;
							margin: 0 4rpx;
						}

						:nth-child(4) {
							color: #666666;
							font-size: 26rpx;
							font-weight: Regular;
							font-family: PingFang-SC-Bold, PingFang-SC;
							margin: 0 4rpx;
						}
					}

					.date {
						display: flex;
						align-items: center;
						margin-top: 22rpx;

						&>text {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #AAAAAA;
							line-height: 24rpx;
						}
					}

					.room_price {
						margin-top: 16rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #AAAAAA;
					}
				}

				.btns {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					border-top: 1rpx solid #EFEFEF;

					&>view {
						margin: 24rpx 0 0 24rpx;
						width: 148rpx;
						height: 56rpx;
						border: 1rpx solid #EFEFEF;
						border-radius: 28rpx;
						line-height: 56rpx;
						text-align: center;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;

						&.btn_blue {
							border: 1rpx solid #007A69;
							color: #007A69;
						}
					}
				}

				&.qx {
					text {
						color: #AAAAAA !important;
					}
				}
			}
		}

		.tip {
			width: 100%;
			text-align: center;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #AAAAAA;
			line-height: 33rpx;
			padding: 56rpx 0;
		}

		.textQx {
			color: #AAAAAA;
		}

		.textDcx {
			color: #333333;
		}

		.textDzf {
			color: #FF7D01;
		}
	}
</style>